<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">银行卡管理</div>
                <div class="fls"></div>
            </div>
        </van-sticky>

        <div class="addibody">
            <!-- <div class="addnameinter">
                <div class="addzuo">持卡人</div>
                <div class="addyou">
                    <input type="text" placeholder="请输入持卡人姓名">
                </div>
            </div> -->
            <div class="addnameinter">
                <div class="addzuo">身份证</div>
                <div class="addyou">
                    <input type="text" v-model="shenfenzhn" placeholder="请输入身份证号">
                </div>
            </div>
            <div class="addnameinter">
                <div class="addzuo">银行卡号</div>
                <div class="addyou">
                    <div class="ibinegbs">
                        <input type="number" v-model="bank" placeholder="请输入银行卡号">
                    </div>
                    <div class="intebsf">
                        <img src="../../../static/images/icon-camera.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div class="niceckead">
            <van-button type="primary"  color="#3288FF"  @click="close()" block>添加银行卡</van-button>
            <!-- <div class="isok" @click="close()">确定</div> -->
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';

import Vue from 'vue'
import api from '../../api/PublicInterface'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            shenfenzhn:'',//身份证
            bank:"",//银行卡
        }
    },
    methods:{
        // 添加银行卡
        close(){
             var reg = /^(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)|(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)$/;
             var pattern = /^([1-9]{1})(\d{14}|\d{18})$/
            if(this.shenfenzhn == ''){
                Toast('请输入身份证号');
                return;
            }
            if(!reg.test(this.shenfenzhn)){
                Toast('填写身份证号有误')
                return;
            }
            if(this.bank == ''){
                Toast('请输入银行卡号');
                return;
            }
            if(!pattern.test(this.bank)){
                Toast('填写银行卡有误')
                return;
            }
            const data ={
                cardNo: this.bank,//	银行卡号
                reservedPhone:'18855056153',//银行预留手机号
            }
            console.log(data)
            this.$api.addbalance(data).then((res)=>{
                console.log(res)
                if(res.status == '0000'){
                    Toast('添加成功');
                    setTimeout(()=>{
                        this.$router.back(-1)
                    },1000)
                }else{
                    Toast(res.describe);
                }
            })
        }
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
        .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }
    .niceckead{
        width: 100%;
        margin-top: 40px;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .isok{
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #3288FF;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }

    .addibody{
        width: 100%;
        background: #fff;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .addnameinter{
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #F2F2F2;
    }

    .addzuo{
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .addyou{
        width: 70%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .addyou>input{
        width: 100%;
        border: 0;
    }
    .ibinegbs{
        width: 88%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .ibinegbs>input{
        width: 100%;
        border: 0;
    }

    .intebsf{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .intebsf>img{
        width: 100%;
        height: 100%;
    }
</style>